<template>
  <div>
    <div class="socialTitle clearfix">
      <div class="item-title-account fl">
        <span class="title-icon"></span>企业退款申请审批
      </div>

      <!-- 注释 -->
      <!-- <div
        class="export-btn fr"
        @change="uploadFile($event)"
        style="margin: 10px  0 10px 10px"
        v-if="global.powerAllBtn.cwgl.qytkdrBtn"
      >
        <input
          type="file"
          name
          id="uploadFile"
          style="display: none"
        >
        <label for="uploadFile">导入</label>
        <img
          src="../../../assets/img/export.png"
          alt
        >
      </div>
      <div
        class="export-btn fr"
        @click="exportAll"
        v-if="global.powerAllBtn.cwgl.qytkdcBtn"
        style="margin: 10px  0 10px 0px"
      >
        <img
          src="../../../assets/img/import.png"
          alt
        >
        <span>导出</span>
      </div> -->

    </div>
    <div class="search-nav-box">
      <div class="item-search">
        <span>申请时间段</span>
        <!-- <el-date-picker
          class="item-data-serach"
          v-model="searchData.createTime"
          type="daterange"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
        ></el-date-picker>-->
        <el-date-picker
          v-model="searchData.begintime"
          type="date"
          placeholder="请选择"
          value-format="yyyy-MM-dd"
          style="width:140px"
        ></el-date-picker>
        <span class="separator">~</span>
        <el-date-picker
          v-model="searchData.endtime"
          type="date"
          placeholder="请选择"
          value-format="yyyy-MM-dd"
          style="width:140px"
        ></el-date-picker>
      </div>
      <div class="item-search">
        <span>地区</span>

        <!-- <el-cascader
          popper-class="regions"
          :options="addressOptions"
          v-model="searchData.regions"
          :show-all-levels="false"
          :clearable="true"
          @change="changeCity()"
        ></el-cascader>-->
        <city-Cascader
          :citys="searchData.citys"
          :level="level"
          @handleChange="handleCityChange"
        ></city-Cascader>
      </div>
      <div
        class="item-botton"
        @click="SearchInfo()"
      >查询</div>
      <!-- <div class = "btn-right">
              <div class = "btn import_btn" @click = "importAll()">导入</div>
              <div class = "btn export_btn" @click = "exportAll()">导出</div>
      </div>-->
    </div>
    <div
      id="jhTable"
      class="socialTitle_box"
    >
      <ul class="checkTab fl">
		  <template v-for="item in tabs">
			  <!-- 消失的气泡 -->
			  <el-badge :value="totalRefund" :max="99" :hidden="item.label != '待处理' || totalRefund == 0" class="item">
			  	<li
			  	  :key="item.value"
			  	  v-html="item.label"
			  	  :class="{'active':current===item.value}"
			  	  @click="clickTab(item,item.value)"
			  	></li>
			  </el-badge>	
		  </template>
		
      </ul>
      <!-- <div class="fr import" v-show="current==='0'">
        <el-button round icon="el-icon-download" style="color:#0064e4;border-color:#0064e4" @click="importData()">导出</el-button>
      </div>-->
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        border
      >
        <template v-for="item in tableColumn">
          <el-table-column
            :key="item.value"
            v-if="item.value!=='opt' && item.value!='usenum'"
            :prop="item.value"
            :label="item.label"
            align="center"
          ></el-table-column>
          <el-table-column
            :key="item.value"
            v-else-if="item.value=='usenum'"
            :label="item.label"
            min-width="90px"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{scope.row.usenum}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column
            v-else-if="item.value=='opt'"
            label="操作"
            align="center"
          >
            <span>退款</span>
          </el-table-column> -->
          <el-table-column
            :key="item.value"
            label="操作"
            align="center"
            v-else-if="item.value=='opt' && optShowOne "
          >
            <!-- <template slot-scope="scope">
              <span v-if="current == 0">未处理</span>
              <span v-if="current == 1">已处理</span>
              <span v-if="current == 2">已处理</span>
            </template> -->
            <template slot-scope="scope">
              <el-button
                v-if="current==='0' && global.powerAllBtn.cwgl.qytksbBtn && optShowOne"
                @click="toReport(scope.row,'12')"
                type="text"
                size="small"
              >审批上报</el-button>
              <!-- <el-button
                v-if="current==='0' && global.powerAllBtn.cwgl.qytkspBtn && optShowTwo"
                @click="handleClick(scope.row)"
                type="text"
                size="small"
              >审批</el-button> -->
              <!-- <el-button
                v-else
                @click="handleClick(scope.row)"
                type="text"
                size="small"
              >详情</el-button> -->
            </template>
          </el-table-column>

        </template>
      </el-table>

      <div class="pageBox">
        <!-- <el-pagination
          background
          layout="total, prev, pager, next, jumper"
          :current-page.sync="cpage"
          :total="totalNum"
          @current-change="pageChange"
          :page-size="pageSize"
        ></el-pagination>-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="pageChange"
          :current-page="Page.pageNum"
          :page-sizes="[10,20, 30, 50,100]"
          :page-size="Page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="Page.total"
          background
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      :visible.sync="manageShow"
      width="700px"
      :close-on-click-modal="false"
      class="jhdialog"
    >
      <div class="comTitle clearfix">
        <div
          class="titleName fl"
          v-html="companyInfo.companyname"
        ></div>
        <div :class="{'fr':true,'status':true,'pass':current==='1','red':current==='2'}">{{status}}</div>
      </div>
      <div style="padding:0 20px 20px;">
        <div class="title">退款信息</div>
        <ul class="info clearfix">
          <li>
            <div class="info-label">退款企业名称:</div>
            <div
              class="infoText"
              v-html="companyInfo.companyname"
            ></div>
          </li>
          <li>
            <div class="info-label">退款金额:</div>
            <div
              class="infoText red"
              v-html="`${companyInfo.refundnum}元`"
            ></div>
          </li>
          <li>
            <div class="info-label">退款账户名称:</div>
            <div
              class="infoText"
              v-html="companyInfo.restorenum"
            ></div>
          </li>
          <li>
            <div class="info-label">申请时间:</div>
            <div
              class="infoText"
              v-html="companyInfo.insertdate"
            ></div>
          </li>
          <li>
            <div class="info-label">退款银行账号:</div>
            <div
              class="infoText"
              v-html="companyInfo.usenum"
            ></div>
          </li>
          <li style="width: 100%">
            <div class="info-label">退款银行:</div>
            <div
              class="infoText"
              v-html="companyInfo.banktype"
            ></div>
          </li>
        </ul>
        <div
          v-if="current==='0'"
          class="border-dashed"
        >
          <div class="title">退款处理结果</div>
          <div style="height:40px;display: flex;align-items: center;">
            <el-radio-group
              v-model="refundResult"
              style="padding:0 20px"
              @change="resultChange"
            >
              <el-radio label="1">成功</el-radio>
              <el-radio label="2">未成功</el-radio>
            </el-radio-group>
            <div v-show="refundResult==='2'">备注：
              <el-input
                style="width:300px"
                placeholder="请填写未通过原因"
                v-model="failReason"
              ></el-input>
            </div>
          </div>
          <div
            slot="footer"
            class="dialog-footer"
          >
            <el-button @click="cancel">取 消</el-button>
            <el-button
              class="button"
              type="primary"
              @click="submit"
            >提 交</el-button>
          </div>
        </div>
        <div
          v-if="current!=='0'"
          class="border-dashed"
        >
          <div class="title">退款审批信息</div>
          <ul class="info clearfix">
            <li>
              <div class="info-label">退款处理结果:</div>
              <div
                :class="{'infoText':true,'pass':current==='1','red':current==='2'}"
                v-html="statusList[current]"
              ></div>
            </li>
            <li>
              <div class="info-label">审批人:</div>
              <div
                class="infoText"
                v-html="companyInfo.auditorname"
              ></div>
            </li>
            <li v-if="current==='2'">
              <div class="info-label">失败原因:</div>
              <pre class="infoText reason">{{companyInfo.note}}</pre>
            </li>
            <li>
              <div class="info-label">审批时间:</div>
              <div
                class="infoText"
                v-html="companyInfo.auditdate"
              ></div>
            </li>
          </ul>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :visible.sync="warnDialogVisible"
      width="500px"
      @close="closeWarnDialog"
    >
      <div class="warn-dialog-header">
        <span>上报原因</span>
      </div>
      <div class="warn-dialog-body">
        <div class="warn-dialog-body-title">发送内容</div>
        <el-input
          type="textarea"
          :rows="6"
          v-model.trim="reportContent"
        ></el-input>
        <div class="warn-dialog-btn">
          <el-button
            style="margin-right: 30px;"
            @click="warnDialogVisible = false"
          >取消</el-button>
          <el-button
            type="primary"
            @click="confirmReport"
          >确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import cityCascader from "../../../component/cityCascader/index.vue";
export default {
  name: "",
  components: {
    cityCascader
  },
  props:['totalRefund'],
  data () {
    return {
      current: "0",
      status: "待处理",
      manageShow: false, //处理弹框flag
      refundResult: "1", //退款结果
      failReason: "", //失败原因
      tabs: [
        { label: "待处理", value: "0" },
        { label: "银行受理中", value: "3" },
        { label: "退款成功", value: "1" },
        { label: "退款失败", value: "2" }
      ],
      statusList: ["待处理", "退款成功", "退款失败", "银行受理中"],
      columnObj: {
        "0": [
          { label: "企业名称", value: "companyname" },
          { label: "退款账户名", value: "restorenum" },
          { label: "退款银行账号", value: "usenum" },
          { label: "退款银行", value: "banktype" },
          { label: "退款金额(元)", value: "refundnum" },
          { label: "申请时间", value: "insertdate" },
          { label: "操作", value: "opt" }
        ],
        "1": [
          { label: "企业名称", value: "companyname" },
          { label: "退款银行", value: "banktype" },
          { label: "退款银行账户", value: "usenum" },
          { label: "退款账户人", value: "restorenum" },
          { label: "退款金额(元)", value: "refundnum" },
          { label: "申请时间", value: "insertdate" },
          { label: "审批人", value: "auditorname" },
          { label: "审批时间", value: "auditdate" },

        ],
        "2": [
          { label: "企业名称", value: "companyname" },
          { label: "退款银行", value: "banktype" },
          { label: "退款银行账户", value: "usenum" },
          { label: "退款账户人", value: "restorenum" },
          { label: "退款金额(元)", value: "refundnum" },
          { label: "申请时间", value: "insertdate" },
          { label: "审批人", value: "auditorname" },
          { label: "审批时间", value: "auditdate" },

        ],
        "3": [
          { label: "企业名称", value: "companyname" },
          { label: "退款银行", value: "banktype" },
          { label: "退款银行账户", value: "usenum" },
          { label: "退款账户人", value: "restorenum" },
          { label: "退款金额(元)", value: "refundnum" },
          { label: "申请时间", value: "insertdate" }

        ],
      },
      tableColumn: [],
      tableData: [],
      companyInfo: {},
      cpage: 1,
      totalNum: 0,
      // pageSize: 10,
      // 页码数
      Page: {
        total: 10,
        pageNum: 1,
        pageSize: 10
      },
      searchData: {
        createTime: "",
        regions: "",
        citys: [],
        province: "", //省份编码
        city: '', //城市编码
        area: '', //区域编码
        begintime: '',
        endtime: ''

      },
      level: '0',
      global: {},
      warnDialogVisible: false,
      reportType: "",
      reportContent: "",
      reportId: "",
      optShowOne: false,
      optShowTwo: false


    };
  },
  created () {
    this.global = this.GLOBAL;
    let department = JSON.parse(localStorage.getItem('userinfo')).department;
    if (department == "退款一部") {
      this.optShowOne = true;
      this.optShowTwo = false
    } else if (department == "退款二部") {
      this.optShowOne = false;
      this.optShowTwo = true
    }
    this.getAuthority();
  },
  mounted () {
    this.tableColumn = this.columnObj[this.current];
    this.getList(null);
  },
  methods: {
    getAuthority () {
      let userinfo = localStorage.getItem('userinfo');
      userinfo = JSON.parse(userinfo);
      this.level = userinfo.level;
      this.searchData.province = +userinfo.province || '';
      this.searchData.city = +userinfo.city || '';
      this.searchData.area = +userinfo.area || '';
      this.searchData.citys = [];
      this.searchData.citys.push(+userinfo.province);
      this.searchData.citys.push(+userinfo.city);
      this.searchData.citys.push(+userinfo.area);
    },
    getList (page) {
      let params = {
        pagenum: page || "1",
        status: this.current,
        pagesize: this.Page.pageSize,
        province: this.searchData.province, //省份编码
        city: this.searchData.city, //城市编码
        area: this.searchData.area, //区域编码
        begintime: this.searchData.begintime,
        endtime: this.searchData.endtime,

      };
      if (this.searchData.begintime && this.searchData.endtime && Date.parse(this.searchData.begintime) > Date.parse(this.searchData.endtime)) {
        this.$message({
          message: "结束时间不能早于开始时间",
          type: "warning"
        });
        return;
      }
      this.$axios
        .post("/app/v1/platform/company/refundList", params)
        .then(res => {
          if (res.data.message === "success.") {
            let result = res.data.data;
            this.tableData = result.list;
			if(this.current==0){this.$emit('update:totalRefund',result.totalnum);}
            console.log(this.tableData)
            // this.pageSize = Number(result.pagesize ? result.pagesize : 10);
            this.totalNum = Number(result.totalnum);
            this.Page.total = Number(result.totalnum);
            // this.cpage = page ? Number(page) : 1;
          } else {
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
        });
    },
    pageChange (p) {
      let page = p.toString();
      this.getList(page);
    },
    clickTab (item, index) {
      this.current = item.value;
      this.status = this.statusList[index];
      this.tableColumn = this.columnObj[item.value];
      this.searchData.begintime = "";
      this.searchData.endtime = "";
      this.Page.pageSize = 10;
      this.searchData.citys = [];
      this.searchData.province = "";
      this.searchData.city = "";
      this.searchData.area = "";
      this.getList("1");
    },
    resultChange (r) {
      if (r === "1") this.failReason = "";
    },
    handleClick (r) {
      this.companyInfo = r;
      this.manageShow = true;
      this.failReason = "";
    },
    cancel () {
      this.manageShow = false;
      this.failReason = "";
    },
    submit () {
      if (this.refundResult === "2" && !this.failReason.trim()) {
        this.$message({
          message: "请填写驳回原因!",
          type: "warning"
        });
        return;
      }
      if (this.refundResult === "1") {
        this.$confirm("是否处理该退款?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = {
            refundid: this.companyInfo.refundid,
            status: this.refundResult,
            remark: this.failReason
          };
          this.$axios
            .post("/app/v1/platform/company/refundResult", params)
            .then(res => {
              if (res.data.message === "success.") {
                this.$message({
                  message: "操作成功!",
                  type: "success"
                });
                this.getList("1");
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
                this.getList("1");
              }
            });
          this.manageShow = false;
        });
      } else {
        this.$confirm("是否驳回该用户的退款申请?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          let params = {
            refundid: this.companyInfo.refundid,
            status: this.refundResult,
            remark: this.failReason
          };
          this.$axios
            .post("/app/v1/platform/company/refundResult", params)
            .then(res => {
              if (res.data.message === "success.") {
                this.$message({
                  message: "操作成功!",
                  type: "success"
                });
                this.getList("1");
              } else {
                this.$message({
                  message: res.data.message,
                  type: "error"
                });
                this.getList("1");
              }
            });
          this.manageShow = false;
        });
      }
    },

    //上报
    toReport (r, type) {
      this.warnDialogVisible = true;
      this.reportType = type;
      this.reportContent = '';
      this.reportId = r.refundid;
    },
    closeWarnDialog () {
      this.reportContent = "";
    },
    confirmReport () {
      this.reportAjax();
    },
    //上报请求
    reportAjax () {
      let data = {
        id: this.reportId,
        reporttype: this.reportType,
        content: this.reportContent
      }
      if (!this.reportContent) {
        this.$message({
          type: "warning",
          message: "上报内容不能为空!"
        });
        return;
      }
      this.$axios
        .post("/app/v1/platform/unusual/reportSubmit", data)
        .then(res => {
          if (res.data.code == "1") {
            this.warnDialogVisible = false;
            this.$message({
              type: "success",
              message: "操作成功!"
            });
          } else if (res.data.code == "365") {
            this.warnDialogVisible = false;
            this.$message({
              message: "上报记录已存在,请等待退款二部处理",
              type: "error"
            });

          } else {
            this.warnDialogVisible = false;
            this.$message({
              message: res.data.message,
              type: "error"
            });
          }
        });
    },



    //提现申请列表导出接口-(企业) 2019/3/18 注释
    // exportAllAjax () {
    //   this.$axios({
    //     method: 'post',
    //     url: '/app/v1/platform/statistic/withdrawalOut',
    //     data: {
    //       type: 2
    //     },
    //     responseType: 'blob'
    //   }).then(res => {
    //     this.download(res)
    //   }).catch((error) => {
    //     this.$message({
    //       message: '导出失败,请重新操作',
    //       type: 'warning'
    //     });
    //   })
    // },





    // importData () {
    //   //导出
    //   let form = {
    //     pagenum: "1",
    //     status: "0"
    //   };
    //   this.$axios({
    //     method: "post",
    //     url: "/app/v1/platform/statistic/refundApplyOut",
    //     data: form,
    //     responseType: "blob"
    //   })
    //     .then(res => {
    //       this.download(res);
    //     })
    //     .catch(error => {
    //       this.$message({
    //         message: error,
    //         type: "导出失败"
    //       });
    //     });
    // },
    download (res) {
      if (!res) {
        return;
      }
      let bob = new Blob([res.data]);
      let fileName = res.headers["content-disposition"].split("=")[1];
      fileName = decodeURI(fileName);
      let url = window.URL.createObjectURL(bob);
      let link = document.createElement("a");
      link.style.display = "none";
      link.href = url;
      link.setAttribute("download", fileName);
      document.body.appendChild(link);
      link.click();
    },


    //会员提现申请导入接口 2019/3/18 注释
    // uploadFile (event) {
    //   let config = {
    //     headers: {
    //       "Content-Type": "multipart/form-data" //添加请求头
    //     }
    //   };
    //   let uploadFile = event.target.files[0]; // 文件对象
    //   let filetype = uploadFile.name.split(".")[1]; // 文件后缀名
    //   if (filetype !== "xlsx") {
    //     this.$message({
    //       type: "warning",
    //       message: "请上传excel文件!"
    //     });
    //     return;
    //   }
    //   let param = new FormData(); // 创建form对象
    //   // let filepermission = "1";
    //   param.append("filecontent", uploadFile);
    //   // param.append("filepermission", filepermission);
    //   this.$axios.post("/app/v1/platform/statistic/companyWithdrawalImport", param, config).then(res => {
    //     if (res.data.code === 1) {
    //       this.$message({
    //         type: "success",
    //         message: "导入成功!"
    //       });
    //     } else {
    //       this.$message({
    //         type: "warning",
    //         message: "文件上传失败!"
    //       });
    //     }
    //   });
    // },

    // importAll () {
    //   // this.importAllAjax();
    // },

    // exportAll () {
    //   this.exportAllAjax();

    // },
    // 选择城市
    handleCityChange (val) {
      this.searchData.citys = val;
      this.searchData.province = val[0];
      this.searchData.city = val[1];
      this.searchData.area = val[2];
    },
    handleSizeChange (val) {
      this.Page.pageSize = val;
      this.getList()
    },

    //查询
    SearchInfo () {
      this.getList();
    }

  }
};
</script>
<style scoped lang="less">
.socialTitle_box,
.socialTitle {
  background: #fff;
  margin: 0 18px;
  padding: 0 20px;
}
// .socialTitle {
//   position: relitive;
// }
.export-btn {
  margin: 10px 0;
}
.checkTab {
  padding-top: 25px;
}
.dialog-footer {
  text-align: center;
  margin-top: 20px;
}
.tabShow {
  padding: 0 20px 20px;
}

.title-icon {
  padding-left: 12px;
  border-left: 12px solid #0064e4;
}
.item-title-account {
  line-height: 60px;
  margin-right: 20px;
}
.import {
  line-height: 80px;
}
.status {
  color: #0064e4 !important;
}
.pass {
  color: #19ae0e !important;
}
.red {
  color: #e60012 !important;
}
.button {
  margin-left: 50px;
}
.pageBox {
  padding: 30px 0;
}
.info {
  margin-bottom: 20px;
  li {
    float: left;
    width: 50%;
    padding: 10px 0;
    .info-label {
      color: #999;
      display: inline-block;
      width: 120px;
      text-align: right;
    }
    .infoText {
      color: #404040;
      display: inline-block;
    }
    img {
      vertical-align: top;
    }
  }
  .special {
    width: 100%;
  }
}
.border-dashed {
  border-top: 1px dashed #ccc;
}
.reason {
  white-space: pre-wrap;
  word-wrap: break-word;
  vertical-align: text-top;
  // line-height: 20px;
  float: right;
  width: 62%;
}

//查询样式
.search-nav-box {
  padding-top: 10px;
  height: 50px;
  display: flex;
  background: #fff;
  margin: 0 18px;
  justify-content: space-between;
}
.item-search {
  height: 50px;
  line-height: 50px;
  display: flex;
}
.item-search:nth-child(1) {
  margin-left: 20px;
}
.el-cascader {
  line-height: 50px;
}
/* .item-search:nth-child(2){
    margin-left: 50px;
    margin-right: 50px;
} */
.item-search span {
  margin-right: 5px;
  white-space: nowrap;
  display: inline-block;
  font-size: 14px;
  color: #727272;
}
.item-search:nth-child(3) > .regions {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.item-data-serach {
  margin-top: 5px;
}
.item-botton {
  width: 100px;
  height: 40px;
  line-height: 40px;
  margin: 5px 20px 5px 0px;
  color: #ffffff;
  cursor: pointer;
  background-color: #0064e4;
  text-align: center;
  border-radius: 4px;
}
.btn-right {
  display: flex;
  align-items: center;
}
.btn-right .btn {
  text-align: center;
  width: 96px;
  height: 40px;
  line-height: 40px;
  background-color: #ffffff;
  border-radius: 20px;
  cursor: pointer;
  border: solid 1px #0064e4;
}
.btn-right .btn:first-child {
  margin-right: 10px;
}

/* 上报原因样式 */
.warn-dialog-header {
  font-size: 16px;
  box-sizing: border-box;
  padding: 20px;
  border-bottom: 1px solid #bfbfbf;
}

.warn-dialog-header::before {
  content: "";
  border-left: 8px solid #0064e4;
  margin-right: 10px;
}

.warn-dialog-body {
  box-sizing: border-box;
  padding: 20px;
}

.warn-dialog-body-title {
  font-size: 16px;
  margin-bottom: 20px;
}

.warn-dialog-btn {
  margin-top: 20px;
  text-align: center;
}

// color: #0064e4;
// display: flex;
// justify-content: center;
// align-items: center;
// height: 40px;
// border-radius: 20px;
// border: 1px solid #0064e4;
// padding: 0 15px;
// cursor: pointer;
</style>
